<template>
  <div class="component case-file-import">
    <div class="picture-box">
      <file-upload listType='picture-card' :fileList.sync="fileList" :fileNumberLimit=100 :AllowExtension="['jpg','png','jpeg']"></file-upload>
    </div>
    <el-row :gutter=" 20">
      <el-col :span="19">
        <el-button @click="onClickMatch" :disabled="!fileList.length" :loading="matchLoading">自动匹配</el-button>
        <span class="content" @click="onClickDownload" v-show="isShow">{{`共上传图片${totalNumber}张，匹配成功${this.successNumber}张，匹配失败${this.failNumber}张，点击查看详情>>`}}</span>
      </el-col>
      <el-col :span="5" v-show="isShow && this.successNumber">
        <el-button @click="onClickImport" :loading="importLoading">导入</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script lang='ts'>

import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
import FileUpload from '~/components/common/file-upload.vue'
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { Dependencies } from "~/core/decorator";

@Component({
  components: {
    FileUpload
  }
})

export default class CaseFileImport extends Vue {
  @Dependencies(DataImportExcelInfoService)
  private importExcelService: DataImportExcelInfoService;
  private fileList: any = []
  private successNumber: any = ''
  private isShow: boolean = false
  private importLoading: boolean = false
  private matchLoading: boolean = false
  private importList: any = []
  private downloadUrl: any = ''
  private failNumber: any = ''

  @Emit('close') private emitClose() {
    this.reset()
  }

  private get totalNumber() {
    return parseInt(this.failNumber) + parseInt(this.successNumber)
  }

  private reset() {
    this.successNumber = ''
    this.fileList = []
    this.importList = []
    this.downloadUrl = ''
    this.isShow = false
    this.failNumber = ''
  }

  private onClickMatch() {
    const params = this.fileList.map(item => item.response)
    this.matchLoading = true
    this.importExcelService.fileAutoMatch(params).subscribe(({ success, downloadUrl, result, fail, uploaded }) => {
      if(uploaded){
        this.matchLoading = false
        this.successNumber = success
        this.failNumber = fail
        this.downloadUrl = JSON.parse(downloadUrl)
        this.importList = result
        this.isShow = true
      }else{
        this.$message.error('请等待文件上传完毕再操作！')
        this.matchLoading = false
      }
      
    }, () => (this.matchLoading = false))
  }

  private onClickImport() {
    if (this.fileList.length !== this.totalNumber) return this.$message.error('上传文件数量和匹配案件数量不符，请重新匹配！')

    let fileStatus
    fileStatus = this.fileList.map(item => {
      const fileNameList = this.importList.map(v => v.fileName)
      if (fileNameList.includes(item.response.fileName)) return '1'
      return '0'
    })
    if (fileStatus.find(v => v === '0')) return this.$message.error('目前还有未匹配的文件，请重新匹配！')

    this.importLoading = true
    this.importExcelService.fileImport(this.importList).subscribe(data => {
      this.importLoading = false
      this.emitClose()
      this.$message.success('操作成功！')
    }, () => (this.importLoading = false))
  }
  private onClickDownload() {
    if (!this.downloadUrl) return
    this.$common.downloadFile(this.downloadUrl.url, '自动匹配详情')
  }
}
</script>
<style lang="less">
.case-file-import {
  .picture-box {
    margin-bottom: 20px;
  }
  .content {
    color: #3582fb;
    cursor: pointer;
    padding-left: 20px;
  }
}
</style>